<template>
  <div class="main-nav">
    <div class="equity_tit">
      <p>我的权益</p>
    </div>
    <div
      :class="{
        'nav-cell': true,
        'nav-width-1': true
      }"
      v-for="item in equityList"
    >
      <div class="nav-icon"></div>
      <div class="nav-text">{{ item.equityName }}</div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      equityList: [
        { equityImg: "", equityName: "专项vip价" },
        { equityImg: "", equityName: "分享赚钱" },
        { equityImg: "", equityName: "专属导师" },
        { equityImg: "", equityName: "管理赚钱" },
        { equityImg: "", equityName: "随时提现" }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.clear {
  clear: both;
}

.main-nav {
  width: 100%;
  background-color: #fff;
  padding: 0.5rem 3.2% 0;
  float: left;
  margin-bottom: 0.48rem;

  .equity_tit p {
    border-left: 0.12rem solid #0078ff;
    padding-left: 0.56rem;
    font-size: 0.56rem;
    margin-bottom: 1rem;
    color: #444444;
  }

  .nav-width-1 {
    float: left;
    width: 33.3%;
  }

  .nav-cell {
    margin-bottom: 0.5rem;
  }

  .nav-icon {
    width: 2.2rem;
    height: 2.2rem;
    background-color: #dfdfdf;
    margin: 0 auto 0.2rem;
  }

  .nav-text {
    font-size: 0.52rem;
    color: #444444;
    text-align: center;
  }
}
</style>